<template>
  <div class="home">
    <!-- 定义页面的结构 -->
    <!-- 顶部导航栏 -->
    <div class="header" ref="container">
      <van-sticky :container="container">
        <van-nav-bar type="warning" title="易洁家政" />
      </van-sticky>
    </div>
    <!-- 顶部轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="(category, index) in categoryData"
          :key="category.id"
          :icon="category.icon"
          :text="category.name"
          @click="productPage(category.id, index)"
        />
      </van-grid>
    </div>
    <div>
      <van-notice-bar
        left-icon="volume-o"
        text="诚信树品牌,服务树口碑,家政树丰碑"
        scrollable
      />
    </div>
    <!-- 底部产品展示区域 -->
    <div class="product">
      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      > -->
        <van-card
          v-for="product in productData"
          :key="product.id"
          :price="product.price + '.00'"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
          @click="test"
        />
      <!-- </van-list> -->
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // 轮播图数组
      swipeData: [],
      list: [],
      loading: false,
      finished: false,
      container: null,
    };
  },
  mounted() {
    this.container = this.$refs.container;
  },
  computed: {
    // 引入栏目数据
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    productPage(productCategoryId, activeKey) {
      this.$router.push({
        path: "/product",
        query: {
          productCategoryId: productCategoryId,
          activeKey: activeKey,
        },
      });
    },
    test() {
      console.log("123456");
    },
    // 引入category vuex中的方法
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入peoduct vuex中的方法
    ...mapActions("product", ["getAllProductData"]),
    // 获取所有轮播图的数据
    async getAllSwipeData() {
      let res = await get("/carousel/query", { status: "正常" });
      // 将拿到的数据赋值给轮播图数组
      this.swipeData = res.data.data;
    },
    // 查询栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 5,
      };
      // 调用vuex中的方法 传参
      this.getAllCategoryData(data);
    },
    // 获取产品数据
    queryProduct() {
      let data = {
        page: 1,
        pageSize:6,
      };
      this.getAllProductData(data);
    },
  },
  created() {
    // 自动获取轮播图的数据
    this.getAllSwipeData();
    // 自动获取栏目数据
    this.queryCategory();
    // 自动获取产品数据
    this.queryProduct();
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  font-family: "Poppins", sans-serif;
}
/* 设置轮播区域的样式 */
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 200px;
}
.home {
  width: 100%;
  height: 1137px ;
  /* display: flex; */
  /* align-items:stretch; */
  /* height: 1137px; */
  background-image: url("../Home/y0.jpg");
  background-repeat: repeat;
  background-size: cover;
  
}
.van-card {
  margin-left: 3%;
  width: 94%;
  border-radius: 8px;
  opacity: 0.8;
  background-color: white;
  box-shadow: 2px 2px 2px #acb6e5;
  /* box-shadow: 5px 5px 5px 5px rgba(170, 93, 166, 0.5); */
}
.van-card:hover {
  margin-left: 2%;
  width: 96%;
  /* box-shadow: 2px 2px 2px 2px rgba(224, 6, 97, 0.342); */
  box-shadow: 2px 2px 2px #86fde8;
}

.van-nav-bar {
  height: 60px;
  /* background: linear-gradient(to left, #3494e6, #ec6ead); */
  background: linear-gradient(to right, #acb6e5, #86fde8);
}
::v-deep .van-nav-bar__title {
  margin-top: 40px;
  font-size: 25px;
  color: white;
  font-family: "华文行楷";
}
.product {
  margin-top: 20px;
  overflow:scroll;
}

/* .VotingActivityHomeBody{
      content: ' ';
      position: fixed;
      z-index: -999;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: url("../Home/Moonrise.jpg") center 0 no-repeat;
      background-size: cover;
  } */
</style>